<template>
	<view class="orderDetail">
		<headerTar title="订单详情" />
		<view class="top">
			<view class="icon"><img src="/static/index/shengqian.png" alt=""></view>
			<view class="t_money">{{detailData.chargePrice}}元</view>
			<view class="t_txt">消费金额</view>
		</view>
		<view class="content">
			<view class="box">
				<view class="b_title">充电信息</view>
				<view class="b_txt"><span>充电状态</span> <span>{{detailData.orderStatus}}</span></view>
				<view class="b_txt"><span>预付金额</span> <span>{{detailData.payPrice}}元</span></view>
				<view class="b_txt"><span>实际充电时间</span> <span>{{detailData.realChargeTime}}分钟</span></view>
				<view class="b_txt"><span>选择充电时间</span> <span>{{detailData.preChargeTime}}分钟</span></view>
				<view class="b_txt"><span>计费方式</span> <span>{{handleType(detailData.rateType)}}</span></view>
			</view>
			<view class="box">
				<view class="b_title">退款信息</view>
				<view class="b_txt"><span>退款金额</span> <span>{{detailData.refundPrice}}元</span></view>
				<view class="b_txt"><span>退款状态</span> <span>{{handleRefundType(detailData.refundStatus)}}</span></view>
				<view class="b_txt"><span>退款渠道</span> <span>{{handleRefundStatus(detailData.refundChannel)}}</span>
				</view>
			</view>
			<view class="box">
				<view class="b_title">设备信息</view>
				<view class="b_txt"><span>小区</span> <span>{{detailData.address}}</span></view>
				<view class="b_txt"><span>设备名称</span> <span>{{detailData.deviceName}}</span></view>
				<view class="b_txt"><span>端口号</span> <span>{{detailData.portNo}}</span></view>
			</view>
			<view class="box">
				<view class="b_title">支付信息</view>
				<view class="b_txt"><span>支付方式</span> <span>{{detailData.channelType==0?'微信':''}}</span></view>
				<view class="b_txt"><span>开始时间</span> <span>{{detailData.startTime}}</span></view>
				<view class="b_txt"><span>结束时间</span> <span>{{detailData.payEndTime}}</span></view>
				<view class="b_txt"><span>订单编号</span> <span>{{orderNo}}</span></view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerTar from '@/components/headerTar/header'
	import {
		getChargeOrderDetailAPi
	} from '@/api/pay.js'
	export default {
		components: {
			headerTar
		},
		data() {
			return {
				detailData: '',
				orderNo: ''
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option); //打印出上个页面传递的参数。
			this.orderNo = option.orderNo
			this.getData(this.orderNo)
		},
		methods: {
			handleType(val) {
				switch (val) {
					case 1:
						return '按时间计费';
					case 2:
						return '按电量计费';
					case 3:
						return '按功率计费';
					default:
						break;
				}
			},
			handleRefundType(val) {
				switch (val) {
					case 0:
						return '待退款';
					case 1:
						return '退款失败';
					case 2:
						return '退款成功';
					default:
						break
				}
			},
			handleRefundStatus(val) {
				switch (val) {
					case 0:
						return '原路退回';
					case 1:
						return '退回钱包';
					case 2:
						return '人工处理';
					default:
						break
				}
			},
			getData(val) {
				getChargeOrderDetailAPi({
					orderNo: val
				}).then(v => {
					console.log(v);
					this.detailData = v.data
					console.log(this.detailData);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderDetail {
		.top {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 15rpx 0rpx;

			.icon {
				margin: auto;
				padding: 5rpx;

				img {
					width: 70rpx;
					height: 70rpx;
				}
			}

			.t_money {
				font-size: 36rpx;
				font-weight: bold;
			}

			.t_txt {
				margin-top: 10rpx;
				font-size: 22rpx;
				color: #6dbb8a;
			}
		}

		.content {
			position: relative;
			padding: 0 40rpx;

			.box {
				position: relative;

				.b_title::before {
					content: '';
					position: absolute;
					top: 36rpx;
					left: 0rpx;
					width: 6rpx;
					height: 32rpx;
					background-color: #3dc579;
				}

				.b_title {
					font-size: 32rpx;
					font-weight: bold;
					padding: 30rpx 20rpx;
					border-bottom: 2rpx solid #f7f7f7;
				}


				.b_txt {
					display: flex;
					justify-content: space-between;
					color: #7a7a7a;
					padding: 10rpx 0;
					font-size: 24rpx;
				}

			}
		}
	}
</style>